<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
<!--Vue实例所控制的这个元素区域，就是我们的V-->
<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{msg}}</h3>
</div>
<script>
    // 创建Vue实例，得到ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ok',
        },
        methods: {
            show() {
                console.log('执行了show方法')
            }
        },
        beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它

        },
        created() { //这是遇到的第二个生命周期函数

        },
        beforeMount() { // 模板已经编译好了，但是尚未把模板渲染到页面中去
            // console.log(document.getElementById('h3').innerText)
            // 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        },
        mounted() {// 内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
            // console.log(document.getElementById('h3')).innerText)
        },
        beforeUpdate() { // 这时候，表示我们的界面还没有被更新
            // console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
            // console.log('data中的msg数据是：' + this.msg)
        },
        updated() {
            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
            console.log('data中的msg数据是：' + this.msg)
        }
    })
</script>
</body>
</html>